<template>
  <div class="container" v-if="$route.path === '/canteen/audit'">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="菜品审核" name="first">
        <FoodAudit
          style="height: calc(100vh - 275px); overflow-y: auto"
        ></FoodAudit>
      </el-tab-pane>
      <el-tab-pane label="菜谱审核" name="second" class="menu">
        <MenuAudit
          style="height: calc(100vh - 275px); overflow-y: auto"
        ></MenuAudit>
      </el-tab-pane>
    </el-tabs>
  </div>
  <router-view></router-view>
</template>

<script>
import FoodAudit from "./components/FoodAudit";
import MenuAudit from "./components/MenuAudit";
export default {
  name: "Audit",
  components: {
    FoodAudit,
    MenuAudit,
  },
  data() {
    return {
      activeName: "first",
    };
  },
};
</script>

<style scoped lang="scss">
/deep/.el-tabs__active-bar {
  background-color: #d71820;
}
/deep/.el-tabs__item.is-active {
  color: #d71820;
}
/deep/.el-tabs__item:hover {
  color: #666666;
}
.container {
  margin: 20px 0;
  padding: 20px;
  height: calc(100vh - 220px);
  overflow-y: auto;
  opacity: 1;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
}
</style>
